<template>
	<view class="detail">
		<view class="title">{{info.title}}</view>
		<view class="image">
			<image :src="info.thumbnail"></image>
		</view>
		<view class="content">{{info.description}}</view>
	</view>
</template>

<script>
	import {
		request
	} from '@/api/request';
	
	export default {
		data() {
			return {
				id: '',
				info: {
					title: '',
					thumbnail: '',
					description: '',
				}
			}
		},
		onLoad(options) {
			this.id = options.id;
			
			request({
				url: '/api/article/topdetail',
				method: 'POST',
				data: {
					id: this.id,
				},
			}).then((response) => {
				this.info = response.data.data
				
				this.info.thumbnail = 'https://groupbuy.huishuokj.com/upload/' + response.data.data.thumbnail
			}).catch((error) => {});
		},
	}
</script>

<style scoped lang="scss">
	.detail{
		width: 100%;
		margin: 20rpx auto;
		
		.title{
			width: 90%;
			margin: 0 auto;
			font-size: 36rpx;
			color: #FFFFFF;
			font-weight: 700;
			margin-bottom: 48rpx;
		}
		
		.image{
			width: 90%;
			margin: 0 auto;
			text-align: center;
			margin-bottom: 40rpx;
			
			image{
				width: 100%;
				display: flex;
				height: 280rpx;
			}
		}
		
		.content{
			width: 90%;
			margin: 0 auto;
			font-size: 28rpx;
			color: #ABB0CC;
			line-height: 60rpx;
			text-align: justify;
		}
	}
</style>